<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="carousel" v-if="gallery.length>0">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in gallery" :key="index">
					<view class="image-wrapper">
						<image :src="item.imgUrl" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品基本参数 -->
		<view class="introduce-section">
			<text class="title">{{goodsInfo.name}}</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">{{goodsInfo.retailPrice}}</text>
				<text class="m-price">{{`¥${goodsInfo.marketPrice}`}}</text>
				<text class="coupon-tip">{{`${parseInt(goodsInfo.retailPrice*10/goodsInfo.marketPrice)}折`}}</text>
			</view>
			<view class="bot-row">
				<text>{{`销量:${goodsInfo.sellVolume}`}}</text>
				<text>{{`库存:${goodsInfo.goodsNumber}`}}</text>
				<text>{{`浏览量:${parseInt(goodsInfo.sellVolume*5/3)}`}}</text>
			</view>
		</view>

		<!-- 分享 -->
		<view class="share-section" @click="share">
			<view class="share-icon">
				<text class="zzhicon icon-xingxing"></text>
				返
			</view>
			<text class="tit">该商品分享可领49减10红包</text>
			<text class="zzhicon icon-bangzhu"></text>
			<view class="share-btn">
				立即分享
				<text class="zzhicon icon-jiantou"></text>
			</view>
		</view>

		<!-- 规格与服务 -->
		<view class="c-list">
			<view class="c-row b-b" @click="toggleSpec('affirm')">
				<text class="tit">购买类型</text>
				<view class="con">
					<text class="selected-text">
						{{getCheckedSpecText()}}
					</text>
				</view>
				<text class="zzhicon icon-jiantou"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">优惠券</text>
				<text class="con t-r red">领取优惠券</text>
				<text class="zzhicon icon-jiantou"></text>
			</view>
			<view class="c-row b-b">
				<text class="tit">促销活动</text>
				<view class="con-list">
					<text>新人首单送20元无门槛代金券</text>
					<text>订单满50减10</text>
					<text>订单满100减30</text>
					<text>单笔购买满两件免邮费</text>
				</view>
			</view>
			<view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>7天无理由退换货 ·</text>
					<text>假一赔十 ·</text>
				</view>
			</view>
		</view>

		<!-- 评价 -->
		<view class="eva-section" v-if="comment.count>0">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>{{`(${comment.count})`}}</text>
				<text class="tip">查看全部</text>
				<text class="zzhicon icon-jiantou"></text>
			</view>
			<view class="eva-box">
				<image class="portrait" :src="comment.data.avatar" mode="aspectFill"></image>
				<view class="right">
					<view class="name">
						<text>{{comment.data.nickname}}</text>
						<text class="time">{{comment.data.addTime}}</text>
					</view>
					<text class="con">{{comment.data.content}}</text>
					<view class="imgs" v-if="comment.data.picList.length > 0">
						<image class="img" v-for="(item,index) in comment.data.picList" :key="index" :src="item.picUrl"></image>
					</view>
					<view class="bot" v-if="false">
						<text class="attr">购买类型：</text>
						<text class="time">{{comment.data.addTime}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品属性参数 -->
		<view class="goods-attr" v-if="attribute.length>0">
			<view class="t">商品参数</view>
			<view class="l">
				<view class="item" v-for="(item,index) in attribute" :key="index">
					<text class="left">{{item.name}}</text>
					<text class="right">{{item.value}}</text>
				</view>
			</view>
		</view>

		<!-- 详情富文本 -->
		<view class="detail-desc">
			<view class="d-header">
				<text>图文详情</text>
			</view>
			<rich-text :nodes="goodsInfo.goodsDesc"></rich-text>
			<u-parse :content="goodsInfo.goodsDesc" v-if="false"></u-parse>
		</view>

		<!-- 常见问题 -->
		<view class="common-problem" v-if="issue.length>0">
			<view class="d-header">
				<text>常见问题</text>
			</view>
			<view class="b">
				<view class="item" v-for="(item,index) in issue" :key="index">
					<view class="question-box">
						<text class="spot"></text>
						<text class="question">{{item.question}}</text>
					</view>
					<view class="answer">
						{{item.answer}}
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/home/home" open-type="switchTab" class="p-b-btn">
				<text class="zzhicon icon-shouye"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="zzhicon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator>
			<view class="p-b-btn" :class="{active: userHasCollect == 1}" @click="toFavorite">
				<text class="zzhicon icon-xin"></text>
				<text>收藏</text>
			</view>
			<view class="action-btn-group">
				<button type="primary" class="action-btn no-border buy-now-btn" @click="toggleSpec('buy')">立即购买</button>
				<button type="primary" class="action-btn no-border add-cart-btn" @click="toggleSpec('add')">加入购物车</button>
			</view>
		</view>

		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec('affirm')">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="specificationImg"></image>
					<view class="right">
						<text class="price" v-if="checkedProduct.retailPrice>0">{{`¥${checkedProduct.retailPrice}`}}</text>
						<text class="stock" v-if="checkedProduct.goodsNumber>0">{{`库存：${checkedProduct.goodsNumber}件`}}</text>
						<view class="selected" v-if="Object.keys(checkedValues).length>0">
							已选：
							<text class="selected-text">
								{{getCheckedSpecText()}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in specificationList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text v-for="(cItem, cIndex) in item.valueList" :key="cIndex" :class="{selected:cItem.checked}" @click="selectSpec(index,cIndex)">
							{{cItem.value}}
						</text>
					</view>
				</view>
				<view class="length">
					<view class="text">数量</view>
					<view class="number">
						<view class="sub" @tap.stop="sub">
							<view class="icon zzhicon icon-jiansvg"></view>
						</view>
						<view class="input" @tap.stop="discard">
							<input type="number" v-model="number" :disabled="true" />
						</view>
						<view class="add" @tap.stop="add">
							<view class="icon zzhicon icon-jia"></view>
						</view>
					</view>
				</view>
				<button class="btn" @click="goBuyOrAdd">{{handleType == 'buy'?'立即购买':(handleType == 'add'?'加入购物车':'完成')}}</button>
			</view>
		</view>
		<!-- 分享 -->
		<share ref="share" :contentHeight="580" :shareList="shareList"></share>
	</view>
</template>

<script>
	import share from '@/components/share'
	import HTMLParser from '@/common/js/html-parser.js'
	import uParse from '@/components/u-parse/u-parse.vue'
	import graceRichText from '@/common/js/richText.js'
	export default {
		components: {
			share,
			uParse,
		},
		data() {
			return {
				goodsInfo: {}, //商品信息
				gallery: [], //轮播图
				attribute: [], //属性信息
				issue: [], //常见问题
				comment: {
					data: {
						avatar: "",
						picList: []
					}
				}, //评价信息
				specificationList: [], //规格列表
				productList: [], //产品列表
				userHasCollect: 0, //是否收藏
				specificationImg: '', //当前规格图片
				number: 1, //购买数量
				checkedValues: {}, //选中的规格
				checkedValuesCopy: {}, //选中的规格
				checkedProduct: {}, //选中的产品
				specClass: 'none', //控制模态框显示
				id: '', //商品id
				shareList: [], //
				handleType: 'buy', //buy购买，add添加购物车
			};
		},
		async onLoad(options) {
			this.id = options.id
			this.getGoodsInfo(options.id)
		},
		methods: {
			//获取商品详情信息
			getGoodsInfo(id) {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.goodsDetail),
					data: {
						id: id,
						userId: uni.getStorageSync('userId') || 0
					},
					showLoad: true
				}).then(function(res) {
					console.log(res)
					if (res.code == 0) {
						that.goodsInfo = res.goodsInfo
						that.goodsInfo.goodsDesc = graceRichText.format(res.goodsInfo.goodsDesc)
						that.gallery = res.gallery
						that.attribute = res.attribute
						that.issue = res.issue
						that.comment = res.comment
						that.specificationList = res.specificationList
						that.productList = res.productList
						that.userHasCollect = res.userHasCollect
						if (res.productList && res.productList.length > 0) {
							that.checkedProduct = res.productList[0]
							that.specificationImg = res.productList[0].listPicUrl ? res.productList[0].listPicUrl : res.goodsInfo.listPicUrl
							let gsIds = res.productList[0].goodsSpecificationIds.split("_")
							for (let i = 0; i < gsIds.length; i++) {
								for (let j = 0; j < res.specificationList.length; j++) {
									for (let k = 0; k < res.specificationList[j].valueList.length; k++) {
										if (gsIds[i] == res.specificationList[j].valueList[k].id) {
											res.specificationList[j].valueList[k].checked = true;
											that.checkedValues[res.specificationList[j].valueList[k].specificationId] = res.specificationList[j].valueList[
												k];
										}
									}
								}
							}
						}
						that.checkedValuesCopy = that.checkedValues
					}
				})
			},
			//选择商品规格，判断规格产品数量，根据产品显示价格和库存
			selectSpec(index, cIndex) {
				//得到选中后的属性
				this.checkedValuesCopy[this.specificationList[index].valueList[cIndex].specificationId] = this.specificationList[
					index].valueList[cIndex];
				let checkedProducts = this.getCheckedProductItem(this.getCheckedSpecKey(this.checkedValuesCopy));
				if (checkedProducts.length == 0 || checkedProducts[0].goodsNumber == 0) {
					uni.showToast({
						title: '该型号暂时无库存，请重新选择',
						duration: 2000
					});
					this.checkedValuesCopy = this.checkedValues;
					return false;
				}
				this.checkedValues = this.checkedValuesCopy;
				this.checkedProduct = checkedProducts[0];
				if (this.specificationList[index].valueList[cIndex].picUrl) {
					this.specificationImg = this.specificationList[index].valueList[cIndex].picUrl
				}
				for (let j = 0; j < this.specificationList[index].valueList.length; j++) {
					if (j == cIndex) {
						this.specificationList[index].valueList[cIndex].checked = true
					} else {
						this.specificationList[index].valueList[j].checked = false
					}
				}
			},
			//获得已选择商品规格的id，并以'_'相连
			getCheckedSpecKey(checkedValues) {
				let checkedValue = Object.values(checkedValues).map(function(v) {
					return v.id;
				});
				return checkedValue.join('_');
			},
			//获得所选规格的产品信息
			getCheckedProductItem(key) {
				return this.productList.filter(function(v) {
					if (v.goodsSpecificationIds == key) {
						return true;
					} else {
						return false;
					}
				});
			},
			//减少数量
			sub() {
				if (this.number <= 1) {
					return;
				}
				this.number--;
			},
			//增加数量
			add() {
				this.number++;
			},
			discard() {
				console.log("丢弃")
			},
			//规格弹窗开关
			toggleSpec(type = "buy") {
				this.handleType = type
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//收藏
			toFavorite() {
				const that = this;
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.collectAddOrDelete),
					method: "POST",
					data: {
						valueId: that.id,
						typeId: 0
					},
					showLoad: true
				}).then(function(res) {
					console.log(res)
					if (res.code == 0) {
						if (res.type == "add") {
							that.userHasCollect = 1
						} else if (res.type == "delete") {
							that.userHasCollect = 0
						}
					}
				})
			},
			//丢弃事件
			stopPrevent() {},
			//购买/加入购物车
			goBuyOrAdd() {
				if (this.handleType == 'buy') {
					this.buyGoods()
				} else if (this.handleType == 'add') {
					this.addToCart()
				}
				this.toggleSpec("affirm")
			},
			//添加到购物车
			addToCart() {
				const that = this;
				if (!that.checkedProduct || that.checkedProduct.goodsNumber == 0) {
					uni.showToast({
						title: '该型号暂时无库存，请重新选择',
						duration: 2000
					});
					return false;
				}
				that.$http.ajax({
					url: that.$http.adornUrl(that.$api.cartAdd),
					method: "POST",
					data: {
						goodsId: that.id,
						productId: that.checkedProduct.id,
						number: that.number,
						checkedSpecText: that.getCheckedSpecText(),
					},
					showLoad: true
				}).then(function(res) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
				})
			},
			//直接购买
			buyGoods() {
				console.log("直接购买")
			},
			//得到选中的规格名
			getCheckedSpecText() {
				let checkedSpecText = "";
				let checkedV = Object.values(this.checkedValues);
				for (let i = 0; i < checkedV.length; i++) {
					checkedSpecText += checkedV[i].value
				}
				return checkedSpecText;
			},

			//分享
			share() {
				this.$refs.share.toggleMask();
			},
		},
	}
</script>
<style lang='scss'>
	@import url("../../components/u-parse/u-parse.css");

	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.icon-jiantou {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-jiantou {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-jiantou {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.name {
				display: flex;
				justify-content: space-between;

				.time {
					font-size: $font-sm;
					color: $font-color-light;
				}
			}

			.imgs {
				.img {
					width: 128upx;
					height: 128upx;
					margin-right: 18upx;
				}
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/* 商品属性参数 */
	.goods-attr {
		height: auto;
		overflow: hidden;
		padding: 0 31.25upx 25upx 31.25upx;
		margin-top: 16upx;
		background: #fff;

		.t {
			height: 80upx;
			line-height: 80upx;
			font-size: $font-lg;
		}

		.item {
			height: 68upx;
			margin-bottom: 10upx;
			background: #f7f7f7;
			font-size: $font-base;
			display: flex;
			align-items: center;
			padding: 0 20upx;
		}

		.left {
			float: left;
			font-size: 25upx;
			width: 144upx;
			height: 45upx;
			line-height: 45upx;
			overflow: hidden;
			color: #999;
		}

		.right {
			float: left;
			margin-left: 20upx;
			width: 480upx;
			height: 45upx;
			line-height: 45upx;
			overflow: hidden;
			color: #333;
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		width: 100%;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 常见问题 */
	.common-problem {
		height: auto;
		overflow: hidden;
		background: #fff;
		
		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}

		.b {
			height: auto;
			overflow: hidden;
			padding: 0upx 30upx;
			background: #fff;
		}

		.item {
			height: auto;
			overflow: hidden;
			padding-bottom: 25upx;
			display: flex;
			flex-direction: column;
		}

		.question-box {
			.spot {
				float: left;
				display: block;
				height: 8upx;
				width: 8upx;
				background: #b4282d;
				border-radius: 50%;
				margin-top: 11upx;
			}

			.question {
				float: left;
				line-height: 30upx;
				padding-left: 8upx;
				display: block;
				font-size: 26upx;
				padding-bottom: 15upx;
				color: #303030;
			}
		}

		.answer {
			line-height: 36upx;
			padding-left: 16upx;
			font-size: 26upx;
			color: #787878;
		}
	}


	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				background: #fff;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}

		.length {
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;

			.text {
				font-size: 30upx;
			}

			.number {
				display: flex;
				justify-content: center;
				align-items: center;

				.input {
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;

					input {
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}

				.sub,
				.add {
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;

					.icon {
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.zzhicon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .zzhicon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-xin {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>
